<template>
  <div
    :class="[
      firstLoading ? firstLoadingCls : '',
      (isEmpty && emptyFit) || (loading && loadingFit && !firstLoading && data && data.length === 0)
        ? 'h-full flex items-center justify-center'
        : '',
    ]"
  >
    <SlEmpty v-if="isEmpty" :description="emptyText"></SlEmpty>
    <Skeleton v-else-if="firstLoading" active :loading="loading" v-bind="skeletonProps"><slot /></Skeleton>
    <Spin v-else :spinning="loading" v-bind="spinProps"><slot /></Spin>
  </div>
</template>
<script lang="ts" setup>
import { Skeleton, Spin } from "ant-design-vue";
import type { SkeletonProps, SpinProps } from "ant-design-vue";
import { computed, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    loading: boolean;
    skeletonProps?: SkeletonProps;
    spinProps?: SpinProps;
    firstLoadingCls?: string;
    showEmpty?: boolean;
    data?: any[];
    emptyFit?: boolean;
    loadingFit?: boolean;
    emptyText?: string;
  }>(),
  {
    emptyFit: true,
    loadingFit: true,
  }
);
const firstLoading = ref(true);
const isEmpty = computed(() => {
  return props.showEmpty && props.data && props.data.length === 0 && !firstLoading.value && !props.loading;
});
watch(
  () => props.loading,
  (v) => {
    if (!v) {
      firstLoading.value = false;
    }
  }
);
</script>
